<template>
  <div>
    <div class="descriptions-box">
      <el-descriptions
        title="用户信息"
        :column="2"
        :colon="true"
        size="medium  "
        border
      >
        <el-descriptions-item label="用户">{{
          userInfo.username || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="ID">{{
          userInfo.id || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{
          userInfo.nickname || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          userInfo.gender
        }}</el-descriptions-item>

        <el-descriptions-item label="出生日期">-</el-descriptions-item>
        <el-descriptions-item label="年龄">-</el-descriptions-item>
        <el-descriptions-item label="星座">-</el-descriptions-item>
        <el-descriptions-item label="最近登录时间">{{
          userInfo.last_login_time | turnTime
        }}</el-descriptions-item>
        <el-descriptions-item label="最近登录IP">{{
          userInfo.last_login_ip
        }}</el-descriptions-item>
        <el-descriptions-item label="最近登录IP地区">-</el-descriptions-item>
        <el-descriptions-item label="备注">-</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          userInfo.state
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="descriptions-box">
      <el-descriptions title="所在地区" :column="2" :colon="false" border>
        <el-descriptions-item label="省份">-</el-descriptions-item>
        <el-descriptions-item label="城市">-</el-descriptions-item>
        <el-descriptions-item label="区县">-</el-descriptions-item>
        <el-descriptions-item label="详细地址">-</el-descriptions-item>
        <el-descriptions-item label="经度">-</el-descriptions-item>
        <el-descriptions-item label="维度">-</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="descriptions-box">
      <el-descriptions title="联系方式" :column="2" :colon="false" border>
        <el-descriptions-item label="手机号">-</el-descriptions-item>
        <el-descriptions-item label="邮箱">-</el-descriptions-item>
        <el-descriptions-item label="微信">-</el-descriptions-item>
        <el-descriptions-item label="QQ">-</el-descriptions-item>
        <el-descriptions-item label="抖音">-</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="descriptions-box">
      <el-descriptions title="注册信息" :column="2" :colon="false" border>
        <el-descriptions-item label="注册IP">{{
          userInfo.register_ip
        }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{
          userInfo.register_time | turnTime
        }}</el-descriptions-item>
        <el-descriptions-item label="注册IP地区">-</el-descriptions-item>
        <el-descriptions-item label="注册方式">-</el-descriptions-item>
        <el-descriptions-item label="注册端口">-</el-descriptions-item>
        <el-descriptions-item label="注册端口品牌">-</el-descriptions-item>
        <el-descriptions-item label="注册端口型号">-</el-descriptions-item>
        <el-descriptions-item label="注册天数">
          {{ userInfo.register_time | userRegiestDay }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import dayJs from "dayjs";
import ManageAPI from "@/api/manage";
export default {
  filters: {
    // 用户注册天数换算
    userRegiestDay(date) {
      let oldDate = dayJs(date);
      let now = dayJs(Date.now());
      let result = now.diff(oldDate, "day");
      return Math.abs(result) + "天";
    },
  },
  data() {
    return {
      userid: null,
      userInfo: {},
    };
  },
  created() {
    let { userid } = this.$route.query;
    this.userid = userid;
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      ManageAPI.userInfo({
        user: this.userid,
      })
        .then((res) => {
          this.userInfo = res.userInfo;
        })
        .catch((err) => {
          this.$message({
            message: err.msg,
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
.descriptions-box {
  margin-bottom: 18px;
}
</style>
